<script setup lang="ts">
import { localesName } from '@/locales'
import useSettingsStore from '@/store/modules/settings'

defineOptions({
  name: 'I18nSelector',
})

const settingsStore = useSettingsStore()

const langItems = computed(() => {
  return Object.keys(localesName).map((item: any) => ({
    label: localesName[item],
    disabled: settingsStore.lang === item,
    handle: () => settingsStore.setDefaultLang(item),
  }))
})
</script>

<template>
  <HDropdownMenu v-if="settingsStore.settings.toolbar.i18n" :items="[langItems]">
    <slot />
  </HDropdownMenu>
</template>
